import Tabs, { TabsProps } from '@/components/Tabs';
import React from 'react';
import { useIntl } from 'umi';
import {
  // FaultOverview,
  OfflineOverview,
  SubareaOverview,
} from '../../components/overviews';
import { useParams } from '../../SelectedDeviceNodeContext';
export const Overview: React.FC = () => {
  const intl = useIntl();
  const params = useParams();

  const items: TabsProps['items'] = [
    // {
    //   key: 'fault',
    //   label: intl.formatMessage({ id: 'stationRealtimeMonitoring.faultOverview' }),
    //   children: <FaultOverview showArea={params?.hasArea} />,
    // },
    {
      key: 'offline',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.offlineOverview' }),
      children: <OfflineOverview showArea={params?.hasArea} />,
    },
  ];

  if (params?.hasArea) {
    items.unshift({
      key: 'subarea',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.zoneOverview' }),
      children: <SubareaOverview showArea={params.hasArea} />,
    });
  }

  return <Tabs items={items} />;
};
